<template>
  <div class='container'>
    <el-card class="box-card">

      <search-view ref="question-search-component"></search-view>

      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <div class="counts"><i class="el-icon-info"></i> 数据一共 {{ choiceQuestionList.counts }} 条</div>
        <el-tab-pane label="全部" name="-1">
          <my-table
            :table-props="{
            data: choiceQuestionList.items,
            border: false
          }"
            :columns="[
            { label: '试题编号', prop: 'number', width: 100, align: 'center' },
            { label: '学科', prop: 'subject', width: 80, align: 'center' },
            { label: '目录', prop: 'catalog', align: 'center' },
            { label: '题型', slotName: 'questionType', align: 'center' },
            { label: '题干', slotName: 'question', align: 'center' },
            { label: '录入时间', slotName: 'addDate', align: 'center' },
            { label: '难度', slotName: 'difficulty', align: 'center' },
            { label: '录入人', prop: 'creator', align: 'center' },
            { label: '审核状态', slotName: 'chkState', align: 'center' },
            { label: '审核意见', prop: 'chkRemarks', align: 'center' },
            { label: '审核人', prop: 'chkUser', align: 'center' },
            { label: '发布状态', slotName: 'publishState', align: 'center' },
            { label: '操作', slotName: 'operators', width: 450, align: 'center', fixed: 'right' },
          ]"
            :pagination-props="{
            layout: 'total, ->, prev, pager, next, sizes, jumper',
            total: choiceQuestionList.counts
          }"
            :pagination-events="events"
          >
            <template v-slot:questionType="scope">
              {{scope.row.questionType == 1 ? '单选': (scope.row.questionType == 2? '多选': '简答')}}
            </template>
            <template v-slot:addDate="scope">
              {{ getTimeString(scope.row.addDate) }}
            </template>
            <template v-slot:difficulty="scope">
              {{scope.row.difficulty == 1 ? '简单': (scope.row.difficulty == 2? '一般': '困难')}}
            </template>
            <template v-slot:chkState="scope">
              {{scope.row.chkState == 0 ? '待审核': (scope.row.chkState == 1? '已审核': '已拒绝')}}
            </template>
            <template v-slot:publishState="scope">
              {{ getPublishType(scope.row.publishState) }}
            </template>
            <template v-slot:question="scope">
              <div v-html="scope.row.question"></div>
            </template>
            <template v-slot:operators="scope">
              <el-link type="primary" @click="onViewClick(scope.row)" class="link" :underline="false">预览</el-link>
              <el-link :type="scope.row.chkState === 0 ? 'primary' : 'info'" @click="onAuditClick(scope.row)" class="link" :underline="false" :disabled="scope.row.chkState === 0 ? null : 'disabled'">审核</el-link>
              <el-link type="primary" @click="onPutClick(scope.row)" class="link" :underline="false">修改</el-link>
              <el-link type="primary" @click="onShelvesClick(scope.row)" class="link" :underline="false">{{ scope.row.publishState == 0 ? '上架' : '下架'}}</el-link>
              <el-link type="primary" @click="onDelClick(scope.row)" class="link" :underline="false">删除</el-link>
            </template>
          </my-table>
        </el-tab-pane>
        <el-tab-pane label="待审核" name="0">
          <my-table
            :table-props="{
            data: choiceQuestionList.items,
            border: false
          }"
            :columns="[
            { label: '试题编号', prop: 'number', width: 100, align: 'center' },
            { label: '学科', prop: 'subject', width: 80, align: 'center' },
            { label: '目录', prop: 'catalog', align: 'center' },
            { label: '题型', slotName: 'questionType', align: 'center' },
            { label: '题干', slotName: 'question', align: 'center' },
            { label: '录入时间', slotName: 'addDate', align: 'center' },
            { label: '难度', slotName: 'difficulty', align: 'center' },
            { label: '录入人', prop: 'creator', align: 'center' },
            { label: '审核状态', slotName: 'chkState', align: 'center' },
            { label: '审核意见', prop: 'chkRemarks', align: 'center' },
            { label: '审核人', prop: 'chkUser', align: 'center' },
            { label: '发布状态', slotName: 'publishState', align: 'center' },
            { label: '操作', slotName: 'operators', width: 450, align: 'center', fixed: 'right' },
          ]"
            :pagination-props="{
            layout: 'total, ->, prev, pager, next, sizes, jumper',
            total: choiceQuestionList.counts
          }"
            :pagination-events="events"
          >
            <template v-slot:questionType="scope">
              {{scope.row.questionType == 1 ? '单选': (scope.row.questionType == 2? '多选': '简答')}}
            </template>
            <template v-slot:addDate="scope">
              {{ getTimeString(scope.row.addDate) }}
            </template>
            <template v-slot:difficulty="scope">
              {{scope.row.difficulty == 1 ? '简单': (scope.row.difficulty == 2? '一般': '困难')}}
            </template>
            <template v-slot:chkState="scope">
              {{scope.row.chkState == 0 ? '待审核': (scope.row.chkState == 1? '已审核': '已拒绝')}}
            </template>
            <template v-slot:publishState="scope">
              {{scope.row.publishState == 0? '待发布': (scope.row.publishState == 1? '已下架': '已发布')}}
            </template>
            <template v-slot:question="scope">
              <div v-html="scope.row.question"></div>
            </template>
            <template v-slot:operators="scope">
              <el-link type="primary" @click="onViewClick(scope.row)" class="link" :underline="false">预览</el-link>
              <el-link :type="scope.row.chkState === 0 ? 'primary' : 'info'" @click="onAuditClick(scope.row)" class="link" :underline="false" :disabled="scope.row.chkState === 0 ? null : 'disabled'">审核</el-link>
              <el-link type="primary" @click="onPutClick(scope.row)" class="link" :underline="false">修改</el-link>
              <el-link type="primary" @click="onShelvesClick(scope.row)" class="link" :underline="false">{{ scope.row.publishState == 0 ? '上架' : '下架'}}</el-link>
              <el-link type="primary" @click="onDelClick(scope.row)" class="link" :underline="false">删除</el-link>
            </template>
          </my-table>
        </el-tab-pane>
        <el-tab-pane label="已审核" name="1">
          <my-table
            :table-props="{
            data: choiceQuestionList.items.filter(item => item.chkState == 1),
            border: false
          }"
            :columns="[
            { label: '试题编号', prop: 'number', width: 100, align: 'center' },
            { label: '学科', prop: 'subject', width: 80, align: 'center' },
            { label: '目录', prop: 'catalog', align: 'center' },
            { label: '题型', slotName: 'questionType', align: 'center' },
            { label: '题干', slotName: 'question', align: 'center' },
            { label: '录入时间', prop: 'addDate', align: 'center' },
            { label: '难度', slotName: 'difficulty', align: 'center' },
            { label: '录入人', prop: 'creator', align: 'center' },
            { label: '审核状态', slotName: 'chkState', align: 'center' },
            { label: '审核意见', prop: 'chkRemarks', align: 'center' },
            { label: '审核人', prop: 'chkUser', align: 'center' },
            { label: '发布状态', slotName: 'publishState', align: 'center' },
            { label: '操作', slotName: 'operators', width: 450, align: 'center', fixed: 'right' },
          ]"
            :pagination-props="{
            layout: 'total, ->, prev, pager, next, sizes, jumper',
            total: choiceQuestionList.counts
          }"
            :pagination-events="events"
          >
            <template v-slot:questionType="scope">
              {{scope.row.questionType == 1 ? '单选': (scope.row.questionType == 2? '多选': '简答')}}
            </template>
            <template v-slot:difficulty="scope">
              {{scope.row.difficulty == 1 ? '简单': (scope.row.difficulty == 2? '一般': '困难')}}
            </template>
            <template v-slot:chkState="scope">
              {{scope.row.chkState == 0 ? '待审核': (scope.row.chkState == 1? '已审核': '已拒绝')}}
            </template>
            <template v-slot:publishState="scope">
              {{scope.row.publishState == 0? '待发布': (scope.row.publishState == 1? '已下架': '已发布')}}
            </template>
            <template v-slot:question="scope">
              <div v-html="scope.row.question"></div>
            </template>
            <template v-slot:operators="scope">
              <el-link type="primary" @click="onViewClick(scope.row)" class="link" :underline="false">预览</el-link>
              <el-link :type="scope.row.chkState === 0 ? 'primary' : 'info'" @click="onAuditClick(scope.row)" class="link" :underline="false" :disabled="scope.row.chkState === 0 ? null : 'disabled'">审核</el-link>
              <el-link type="primary" @click="onPutClick(scope.row)" class="link" :underline="false">修改</el-link>
              <el-link type="primary" @click="onShelvesClick(scope.row)" class="link" :underline="false">{{ scope.row.publishState == 0 ? '上架' : '下架'}}</el-link>
              <el-link type="primary" @click="onDelClick(scope.row)" class="link" :underline="false">删除</el-link>
            </template>
          </my-table>
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="2">
          <my-table
            :table-props="{
            data: choiceQuestionList.items.filter(item => item.chkState == 2),
            border: false
          }"
            :columns="[
            { label: '试题编号', prop: 'number', width: 100, align: 'center' },
            { label: '学科', prop: 'subject', width: 80, align: 'center' },
            { label: '目录', prop: 'catalog', align: 'center' },
            { label: '题型', slotName: 'questionType', align: 'center' },
            { label: '题干', slotName: 'question', align: 'center' },
            { label: '录入时间', slotName: 'addDate', align: 'center' },
            { label: '难度', slotName: 'difficulty', align: 'center' },
            { label: '录入人', prop: 'creator', align: 'center' },
            { label: '审核状态', slotName: 'chkState', align: 'center' },
            { label: '审核意见', prop: 'chkRemarks', align: 'center' },
            { label: '审核人', prop: 'chkUser', align: 'center' },
            { label: '发布状态', slotName: 'publishState', align: 'center' },
            { label: '操作', slotName: 'operators', width: 450, align: 'center', fixed: 'right' },
          ]"
            :pagination-props="{
            layout: 'total, ->, prev, pager, next, sizes, jumper',
            total: choiceQuestionList.counts
          }"
            :pagination-events="events"
          >
            <template v-slot:questionType="scope">
              {{scope.row.questionType == 1 ? '单选': (scope.row.questionType == 2? '多选': '简答')}}
            </template>
            <template v-slot:addDate="scope">
              {{ getTimeString(scope.row.addDate) }}
            </template>
            <template v-slot:difficulty="scope">
              {{scope.row.difficulty == 1 ? '简单': (scope.row.difficulty == 2? '一般': '困难')}}
            </template>
            <template v-slot:chkState="scope">
              {{scope.row.chkState == 0 ? '待审核': (scope.row.chkState == 1? '已审核': '已拒绝')}}
            </template>
            <template v-slot:publishState="scope">
              {{scope.row.publishState == 0? '待发布': (scope.row.publishState == 1? '已下架': '已发布')}}
            </template>
            <template v-slot:question="scope">
              <div v-html="scope.row.question"></div>
            </template>
            <template v-slot:operators="scope">
              <el-link type="primary" @click="onViewClick(scope.row)" class="link" :underline="false">预览</el-link>
              <el-link :type="scope.row.chkState === 0 ? 'primary' : 'info'" @click="onAuditClick(scope.row)" class="link" :underline="false" :disabled="scope.row.chkState === 0 ? null : 'disabled'">审核</el-link>
              <el-link type="primary" @click="onPutClick(scope.row)" class="link" :underline="false">修改</el-link>
              <el-link type="primary" @click="onShelvesClick(scope.row)" class="link" :underline="false">{{ scope.row.publishState == 0 ? '上架' : '下架'}}</el-link>
              <el-link type="primary" @click="onDelClick(scope.row)" class="link" :underline="false">删除</el-link>
            </template>
          </my-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 预览弹框 -->
    <el-dialog
      title="题目预览"
      :visible.sync="questionVisible"
      @close="onViewClose"
    >
      <div class="question-container">
        <div>
          <span>【题型】：</span>
          <span>{{ questionDatail.questionType == 1 ? '单选题': (questionDatail.questionType == 2 ? '多选题' : '简答')}}</span>
        </div>
        <div>
          <span>【编号】：</span>
          <span>{{ questionDatail.id }}</span>
        </div>
        <div>
          <span>【难度】：</span>
          <span>{{ questionDatail.difficulty == 1 ? '简单' : ( questionDatail.difficulty == 2 ? '一般' : '困难')}}</span>
        </div>
        <div>
          <span>【标签】：</span>
          <span>{{ questionDatail.tags }}</span>
        </div>
        <div>
          <span>【学科】：</span>
          <span>{{ questionDatail.subjectName }}</span>
        </div>
        <div>
          <span>【目录】：</span>
          <span>{{ questionDatail.directoryName}}</span>
        </div>
        <div>
          <span>【方向】：</span>
          <span>{{ questionDatail.direction }}</span>
        </div>
      </div>
      <div class="answer">【题干】：</div>
      <div v-html="questionDatail.answer"></div>
      <el-form :model="questionFromData" class="question-type">
        <el-form-item  v-if="questionFromData.questionType != 3" label="选项:" required>
          <div v-for="item in questionFromData.options" :key="item.code">
            <div><el-radio v-if="questionFromData.questionType == 1" v-model="questionFromData.optionCode" :label="item.code">{{ item.code}}:</el-radio></div>
            <div><el-checkbox v-if="questionFromData.questionType == 2" v-model="questionFromData.optionCodes" :label="item.code">{{ item.code}}:</el-checkbox></div>
          </div>
        </el-form-item>
      </el-form>
      <div class="refer-answer">【参考答案】：<el-button type="danger">视频答案预览</el-button></div>
      <div class="answer-parsing">
        <div>【答案解析】: </div>
        <div v-html="questionDatail.answer"></div>
      </div>
      <div class="note">【题目备注】: {{ questionDatail.remarks }}</div>
      <div class="dialog-footer">
        <el-button @click="onViewClose" type="primary">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 审核弹窗 -->
    <el-dialog
      title="题目审核"
      :visible.sync="auditVisible"
      @close="onAuditClose"
      width="500px"
    >
      <div>
        <el-radio v-model="chkState" :label="1">通过</el-radio>
        <el-radio v-model="chkState" :label="2">拒绝</el-radio>
      </div>

      <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="chkRemarks" style="margin: 16px 0">
      </el-input>
      <div class="dialog-footer">
        <el-button type="primary" @click="onAuditOk">确定</el-button>
        <el-button @click="onAuditClose">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { provinces, citys } from '@/api/hmmm/citys'
import { direction, getPublishType } from '@/api/hmmm/constants'
import * as questionApi from '@/api/hmmm/questions'
import { delModule } from '@/store/utils/delUtils'
import { shelvesUtils } from '@/store/utils/shelvesUtils'
import { defaultUtils } from '@/store/utils/defaultUtils'
import { getTimeString } from '@/utils/time'
import searchView from '@/module-hmmm/components/searchView'


export default {
  name: 'QuestionList',
  components: {
    searchView
  },
  data () {
    return {
      getPublishType,
      getTimeString,
      params: {},
      activeName: '-1',
      dengmiQueryForm: {},
      currentPage: {
        page: 1,
        pagesize: 10
      },
      events: {
        'current-change': this.onCurrentPageChange
      },
      questionFromData: {},
      chkRemarks: '',
      chkState: 1,
      auditID: '',
      companyShow: false,
      companyEditTitle: '',
      questionType: '',

      // 预览弹窗
      questionVisible: false,
      // 审核弹窗
      auditVisible: false
    }
  },
  computed: {
    ...mapState('questions', ['questionList','questionDatail','choiceQuestionList']),
    ...mapState('subjects', ['subjectList', 'simpleList', 'tagList']),
  },
  methods: {
    ...mapActions('questions', ['updateQuestionList', 'updateQuestionDatail', 'updateChoiceQuestionList']),
    ...mapActions('subjects', ['updateSubjectList', 'updateSimpleList', 'updateTagList']),
    onCurrentPageChange(currentPage) {
      this.currentPage.page = currentPage
      this.updateChoiceQuestionList(this.currentPage)
    },

    searchComponent (params) {
      this.updateChoiceQuestionList({
        ...params
      })
      this.params = params
      console.log(this.choiceQuestionList)
    },

    // 预览弹框
    onViewClick(data) {
      this.questionVisible = true
      this.updateQuestionDatail({
        id: data.id
      })
      this.questionDatail.optionCodes = []
      this.questionDatail.optionCode = ''
      // 遍历选项并赋值
      for (const item of this.questionDatail.options) {
        if (item.isRight === 1) {
          this.questionDatail.optionCode = item.code
          this.questionDatail.optionCodes.push(item.code)
        }
      }
      this.questionFromData = this.questionDatail
    },
    onViewClose () {
      this.questionVisible = false
    },
    // 删除题目
    async onDelClick (data) {
      await delModule(questionApi.remove, '题目', { id: data.id })
      this.updateChoiceQuestionList(this.currentPage)
    },

    // 加入精选
    onCheckClick (data) {
      defaultUtils(questionApi.choiceAdd, { id: data.id, choiceState: 1 },
        '此操作将改题目加入精选, 是否继续?', '加入')
      setTimeout(() => {
        this.updateQuestionList(this.currentPage)
      }, 200)
    },

    // 新增试题跳路由
    onChangeNewView () {
      this.$router.push('new')
    },

    // 审核
    onAuditClick (data) {
      this.auditVisible = true
      this.chkRemarks = data.chkRemarks
      this.chkState = data.chkState
      this.auditID = data.id
    },
    onAuditClose () {
      this.auditVisible = false
    },
    async onAuditOk () {
      this.auditVisible = false
      await questionApi.choiceCheck({
        chkRemarks: this.chkRemarks,
        chkState: this.chkState,
        id: this.auditID
      })
      this.updateChoiceQuestionList(this.currentPage)
    },
    // 点击修改 跳路由
    onPutClick(data) {
      this.$router.push({
        path: 'new',
        query: {
          id: data.id
        }
      })
    },
    // 上下架
    async onShelvesClick (data) {
      await shelvesUtils(questionApi.choicePublish, data.publishState == 0 ? '上架' : '下架', {
        id: data.publishState,
        ...data,
        publishState: data.publishState == 0 ? 1 : 0
      })
      setTimeout(() => {
        this.updateChoiceQuestionList(this.currentPage)
      }, 200)
    },
    // tab标签事件
    handleClick (tab, event) {
      const params = { ...this.currentPage }
      if (tab.name != '-1') {
        params.chkState = tab.name
      }
      this.updateChoiceQuestionList({
        ...params,
        ...this.params
      })
    }

  },
  created() {
    this.updateChoiceQuestionList(this.currentPage)
    this.updateQuestionList(this.currentPage)
    this.updateSubjectList()
  },
  updated () {
    this.$refs['question-search-component'].componentFn(this.searchComponent)
  }
}
</script>

<style scoped lang='scss'>
.box-card {
  margin: 12px;
  .instructions{
    display: flex;
    justify-content: space-between;
    padding: 4px 20px 20px 8px;
    div{
      color: #ffc5d5;
      font-size: 12px;
    }
  }
  .counts {
    padding: 8px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    background-color: #f4f4f5;
    border-radius: 6px;
    color: #aaa;
  }
}
.el-form-item {
  display: inline-block !important;
}
.el-form-item__label {
  display: none;
  width: 0px !important;

}
.dialog-footer {
  display: flex;
  justify-content: right;
}
.question-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid #aaa;
  div {
    margin:0 0 16px 0;
  }
}
.answer {
  margin: 8px 0;
}
.question-type {
  border-bottom: 1px solid #aaa;
  div{
    padding: 8px 0;
  }
}
.refer-answer {
  padding: 8px 0;
  border-bottom: 1px solid #aaa;
}
.answer-parsing {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #aaa;
   p {
    margin: 0;
   }

}

.note {
  margin: 8px 0 20px 0;
}

.link{
  margin-right: 16px;
}

</style>
